<script setup>
	import { ref } from 'vue'
	import { getCode, login } from '@/apis/user'
	import { useUserStore } from '@/stores'
	//定义表单数据
	const formData = ref({
		mobile: '',
		code: '',
	})

	//定义表单校验规则
	const rules = {
		mobile: {
			rules: [
				{ required: true, errorMessage: '请输入手机号' },
				{ pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
			],
		},
	}

	//定义倒计时
	const showCountDown = ref(false)

	const form = ref(null)
	const store = useUserStore()
	const imgSrc = ref('')
	const show = ref(false)
	//发送验证码
	const onSend = async () => {
		//校验手机号码合法
		await form.value.validateField('mobile')
		const res = await getCode(formData.value.mobile)
		var blob = new Blob([res], {type: 'image/png'}); // 假设是JPEG格式	 
		// 创建URL
		var imgUrl = URL.createObjectURL(blob);
		show.value = true
		imgSrc.value = imgUrl		
	}

	//登录
	// const onLogin = async () => {
	// 	 try {
	// 		//校验表单
	// 		await form.value.validate()
	// 		const res=await login(formData.value)
	// 		//保存token到仓库
	// 		store.setStore(res.data)
	// 		uni.showToast({
	// 			icon:'success',
	// 		title:'登录成功'
	// 		})
	// 		//跳转页面
	// 		uni[store.openType]({
	// 		 url:store.redirectURL
	// 		})
	// 	} catch (e) {
	// 		console.log(e)
	// 	}
	// }
</script>

<template>
	<uni-forms class="login-form" ref="form" :model="formData" :rules="rules">
		<uni-forms-item name="mobile">
			<input
				type="text"
				placeholder="请输入手机号"
				class="uni-input-input"
				placeholder-style="color: #818181"
				v-model="formData.mobile"
			/>
		</uni-forms-item>
		<uni-forms-item name="code">
			<input
				type="text"
				placeholder="请输入验证码"
				class="uni-input-input"
				placeholder-style="color: #818181"
				v-model="formData.code"
			/>
			<img :src="imgSrc" v-if="show" />
			<text v-else class="text-button" @click="onSend">获取验证码</text>
		</uni-forms-item>
		<button class="submit-button" @click="onLogin">登录</button>
	</uni-forms>
</template>

<style lang="scss" scoped>
	@import './styles.scss';
</style>
